<template>
	<view>
		<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop)" :style="fabBoxStyle" class="uni-fab">
			<view :class="{
          'uni-fab__content--left': horizontal === 'left',
          'uni-fab__content--right': horizontal === 'right',
          'uni-fab__content--flexDirection': direction === 'vertical',
          'uni-fab__content--flexDirectionStart': flexDirectionStart,
          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
		  'uni-fab__content--other-platform': !isAndroidNvue
        }" :style="conStyle" class="uni-fab__content" elevation="5">
				<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
				<block v-for="(item, index) in content" :key="index">
					<template v-if="item.type!=2">
						<view :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" @click="_onItemClick(index, item)">
							<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
							<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
						</view>
					</template>
					<template v-else>
						<!-- #ifdef MP-WEIXIN -->
						<button :class="{ 'uni-fab__item--active': isShow }" class="customer-button uni-fab__item" open-type="contact">
							<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
							<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" @click="_onItemClick(index, item, 1)">
							<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
							<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
						</view>
						<!-- #endif -->
					</template>
				</block>
				<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
			</view>
		</view>
		<view :class="{'uni-fab__content--other-platform': !isAndroidNvue}" class="uni-fab__circle uni-fab__plus" :style="fabStyle" @click="_onClick">
			<image v-if="buttonIcon" :src="buttonIcon" class="fab-circle-h button-image" :class="{'uni-fab__plus--active': isShow}"></image>
			<template v-else>
				<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow}" :style="{ 'background-color': styles.buttonIconColor}"></view>
				<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow}" :style="{ 'background-color': styles.buttonIconColor}"></view>
			</template>
		</view>
	</view>
</template>

<script>
	let platform = 'other'
	// #ifdef APP-NVUE
	platform = uni.getSystemInfoSync().platform
	// #endif

	/**
	 * Fab 悬浮按钮
	 * @description 点击可展开一个图形按钮菜单
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=144
	 * @property {Object} pattern 可选样式配置项
	 * @property {Object} horizontal = [left | right] 水平对齐方式
	 * 	@value left 左对齐
	 * 	@value right 右对齐
	 * @property {Object} vertical = [bottom | top] 垂直对齐方式
	 * 	@value bottom 下对齐
	 * 	@value top 上对齐
	 * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
	 * 	@value horizontal 水平显示
	 * 	@value vertical 垂直显示
	 * @property {Array} content 展开菜单内容配置项
	 * @property {Boolean} popMenu 是否使用弹出菜单
	 * @event {Function} trigger 展开菜单点击事件，返回点击信息
	 * @event {Function} fabClick 悬浮按钮点击事件
	 */
	export default {
		name: 'UniFab',
		props: {
			pattern: {
				type: Object,
				default () {
					return {}
				}
			},
			horizontal: {
				type: String,
				default: 'left'
			},
			vertical: {
				type: String,
				default: 'bottom'
			},
			direction: {
				type: String,
				default: 'horizontal'
			},
			content: {
				type: Array,
				default () {
					return []
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			popMenu: {
				type: Boolean,
				default: true
			},
			buttonIcon: {
				type: String,
				default: '',
			},
			showShadow: {
				type: Boolean,
				default: true
			},
			boxShadowColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.2)',
			},
		},
		data() {
			return {
				fabShow: false,
				isShow: false,
				isAndroidNvue: platform === 'android',
				styles: {
					color: '#3c3e49',
					selectedColor: '#007AFF',
					backgroundColor: '#fff',
					buttonColor: '#3c3e49',
				}
			}
		},
		computed: {
			contentWidth(e) {
				return (this.content.length + 1) * 55 + 10 + 'px'
			},
			contentWidthMin() {
				return 55 + 'px'
			},
			// 动态计算宽度
			boxWidth() {
				return this.getPosition(3, 'horizontal')
			},
			// 动态计算高度
			boxHeight() {
				return this.getPosition(3, 'vertical')
			},
			// 计算左下位置
			leftBottom() {
				return this.getPosition(0, 'left', 'bottom')
			},
			// 计算右下位置
			rightBottom() {
				return this.getPosition(0, 'right', 'bottom')
			},
			// 计算左上位置
			leftTop() {
				return this.getPosition(0, 'left', 'top')
			},
			rightTop() {
				return this.getPosition(0, 'right', 'top')
			},
			flexDirectionStart() {
				return this.getPosition(1, 'vertical', 'top')
			},
			flexDirectionEnd() {
				return this.getPosition(1, 'vertical', 'bottom')
			},
			horizontalLeft() {
				return this.getPosition(2, 'horizontal', 'left')
			},
			horizontalRight() {
				return this.getPosition(2, 'horizontal', 'right')
			},
			fabStyle() {
				let style = [
					`background-color: ${this.styles.buttonColor}`,
					`zIndex:${this.styles.zIndex}`,
				];
				if (this.styles.left) {
					style.push(`left:${this.styles.left}`);
				}
				if (this.styles.right) {
					style.push(`left:${this.styles.right}`);
				}
				if (!this.showShadow) {
					style.push('box-shadow:none');
				} else {
					style.push(`box-shadow: 0 0 5px 2px ${(this.boxShadowColor?this.boxShadowColor:'rgba(0, 0, 0, 0.2)')}`);
				}
				if (this.leftTop || this.rightTop) {
					style.push(`top:${this.$store.statusBarHeight + 44 + 70}px`);
				}
				if (this.leftBottom || this.rightBottom) {
					style.push(`bottom:${this.$store.bottomHeight + 130}rpx`);
				}
				if (this.leftTop || this.leftBottom) {
					style.push('left:10px');
				}
				if (this.rightTop || this.rightBottom) {
					style.push('right:10px');
				}
				return style.join(';');
			},
			conStyle() {
				let css = [
					`width: ${this.boxWidth}`,
					`height: ${this.boxHeight}`,
					`background-color: ${this.styles.backgroundColor}`,
				];

				if (!this.showShadow) {
					css.push('box-shadow:none');
				} else {
					css.push(`box-shadow: 0 0 5px 2px ${(this.boxShadowColor?this.boxShadowColor:'rgba(0, 0, 0, 0.2)')}`);
				}
				return css.join(';');
			},
			fabBoxStyle() {
				let obj = {
					'left': this.styles.leftBox,
					'right': this.styles.rightBox,
					'zIndex': this.styles.zIndex,
				};
				if (this.leftTop || this.rightTop) {
					obj.top = this.$store.statusBarHeight + 44 + 70 + 'px';
				}
				if (this.leftBottom || this.rightBottom) {
					obj.bottom = this.$store.bottomHeight + 130 + 'rpx';
				}
				if (this.leftTop || this.leftBottom) {
					obj.left = '10px';
				}
				if (this.rightTop || this.rightBottom) {
					obj.right = '10px';
				}
				return this.$joinStyle(obj);
			},
		},
		watch: {
			pattern(newValue, oldValue) {
				//console.log(JSON.stringify(newValue))
				this.styles = Object.assign({}, this.styles, newValue)
			}
		},
		created() {
			this.isShow = this.show
			if (this.top === 0) {
				this.fabShow = true
			}
			// 初始化样式
			this.styles = Object.assign({}, this.styles, this.pattern)
		},
		methods: {
			_onClick() {
				this.$emit('fabClick')
				if (!this.popMenu) {
					return
				}
				this.isShow = !this.isShow
			},
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			/**
			 * 按钮点击事件
			 */
			_onItemClick(index, item, type = '') {
				if (type == 1 || !item.type) {
					item.type = 1;
				}
				this.$emit('trigger', {
					index,
					item
				})
			},
			/**
			 * 获取 位置信息
			 */
			getPosition(types, paramA, paramB) {
				if (types === 0) {
					return this.horizontal === paramA && this.vertical === paramB
				} else if (types === 1) {
					return this.direction === paramA && this.vertical === paramB
				} else if (types === 2) {
					return this.direction === paramA && this.horizontal === paramB
				} else {
					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
				}
			}
		}
	}
</script>

<style scoped>
	.uni-fab {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	.uni-fab--active {
		opacity: 1;
	}

	.uni-fab__circle {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		background-color: #3c3e49;
		border-radius: 55px;
		z-index: 11;
	}

	.uni-fab__circle--left {
		left: 0;
	}

	.uni-fab__circle--right {
		right: 0;
	}

	.uni-fab__circle--top {
		top: 0;
	}

	.uni-fab__circle--bottom {
		bottom: 0;
	}

	.uni-fab__plus {
		font-weight: bold;
	}

	.fab-circle-v {
		position: absolute;
		width: 3px;
		height: 31px;
		left: 26px;
		top: 12px;
		background-color: white;
		transform: rotate(0deg);
		transition: transform 0.3s;
	}

	.fab-circle-h {
		position: absolute;
		width: 31px;
		height: 3px;
		left: 12px;
		top: 26px;
		background-color: white;
		transform: rotate(0deg);
		transition: transform 0.3s;
	}

	.uni-fab__plus--active {
		transform: rotate(135deg);
	}

	.uni-fab__content {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		border-radius: 55px;
		overflow: hidden;
		transition-property: width, height;
		transition-duration: 0.2s;
		width: 55px;
		border-color: #DDDDDD;
		border-width: 1rpx;
		border-style: solid;
	}

	.uni-fab__content--other-platform {
		border-width: 0px;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
	}

	.uni-fab__content--left {
		justify-content: flex-start;
	}

	.uni-fab__content--right {
		justify-content: flex-end;
	}

	.uni-fab__content--flexDirection {
		flex-direction: column;
		justify-content: flex-end;
	}

	.uni-fab__content--flexDirectionStart {
		flex-direction: column;
		justify-content: flex-start;
	}

	.uni-fab__content--flexDirectionEnd {
		flex-direction: column;
		justify-content: flex-end;
	}

	.uni-fab__item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		opacity: 0;
		transition: opacity 0.2s;
	}

	.uni-fab__item--active {
		opacity: 1;
	}

	.uni-fab__item-image {
		width: 25px;
		height: 25px;
		margin-bottom: 3px;
	}

	.uni-fab__item-text {
		color: #FFFFFF;
		font-size: 12px;
		text-align: center;
	}

	.uni-fab__item--first {
		width: 55px;
	}

	.button-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
	}

	.customer-button {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		font-size: 0;
		text-align: center;
		line-height: normal;
		border-radius: 0;
		-webkit-tap-highlight-color: transparent;
		color: transparent;
		background-color: initial
	}

	.customer-button::after {
		content: "";
		border: none;
		border-radius: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		width: auto;
		height: auto;
		position: relative
	}
</style>
